<?php
/**
 * Created by PhpStorm.
 * Author: Shadow
 * Date: 2022/4/2
 * Time: 10:31 上午
 * description: article-list.blade.php
 * 文章列表页面
 */
?>
{{--引入本地样式--}}
<script src="/static/jquery-3.6.0.js"></script>
<link rel="stylesheet" href="/static/bootstrap-4.6.1-dist/css/bootstrap.css">
<script src="/static/bootstrap-4.6.1-dist/js/bootstrap.js"></script>
<!-- 引入 layui.css -->
<link rel="stylesheet" href="//unpkg.com/layui@2.6.8/dist/css/layui.css">

<!-- 引入 layui.js -->
<script src="//unpkg.com/layui@2.6.8/dist/layui.js"></script>

<meta name="referrer" content="no-referrer">
<meta name="csrf-token" content="{{ csrf_token() }}">


{{--搜索功能--}}

<form action="list">
    <input type="text" name="title" value="{{$title}}">
    <input type="submit" value="搜索">
</form>
<button  class="batch-del layui-btn layui-btn-danger">批量删除</button>

{{--展示列表--}}
<table class="table">
    <tr>
        <th><input type="checkbox" class="checkAll"></th>
        <th>ID</th>
        <th>标题</th>
        <th>作者</th>
        <th>头图</th>
        <th>状态</th>
        <th>操作</th>
    </tr>
    @foreach($list as $value)
        <tr>
            <td><input type="checkbox" class="checkbox" data-id="{{$value->id}}"></td>
            <td>{{$value->id}}</td>
{{--            str_replace(搜索的内容、替换的内容、搜索的对象)--}}
            <td>{!!   str_replace($title,"<font color='red'>$title</font>",$value->title) !!}</td>
            <td>{{$value->author}}</td>
            <td><img src="{{$value->image}}" alt="" width="80px" height="80px"></td>
            <th><a href="javascript:void(0)" class="status" data-id="{{$value->id}}">{!!  $value->status ==1  ? "<font color='blue'>正常</font>" : "<font color='red'>冻结</font>" !!}</a></th>
            <td>
                <a href="editor?id={{$value->id}}" class="layui-btn layui-btn-sm ">编辑</a>
                <a href="delete?id={{$value->id}}" class="layui-btn layui-btn-sm layui-btn-danger">删除</a>
                <a href="detail?id={{$value->id}}" class="layui-btn layui-btn-sm ">详情</a>
            </td>
        </tr>
    @endforeach
</table>

{{$list->appends(['title' => $title])->links()}}

<script>
    // 全选/全不选
    $('.checkAll').click(function () {
        console.log($(this).prop('checked'));
        // 测试点击事件是否成功
        $('.checkbox').attr('checked',$(this).prop('checked'));
    });

    // 即点即改 、绑定点击时间
    $('.status').click(function () {
        // 测试点击事件是否绑定成功
        // alert(111);
        // 获取要修改数据id
        var id = $(this).attr('data-id');
        var value = $(this).text();// 获取当前的状态值
        console.log(value);
        var that = $(this);// 当前点击的对象、定义一个临时变量存储当前点击的对象
        console.log(id);
        // 发送请求 ajax
        $.ajax({
           url:'updateStatus', //请求的url
           data:{id:id},// 携带的参数 post
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
           type:"POST",// 请求方式
           dataType:'json',
           success:function (response) {
                if(response.code == 200) {
                    //修改成功
                    if(value == '冻结') {
                        that.html("<font color='blue'>正常</font>");
                    } else {
                        that.html("<font color='red'>冻结</font>");
                    }
                } else {
                    // 修改失败
                    alert(response.msg);
                }
           }
        });
    });

    $('.batch-del').click(function () {
        // 获取所有选中的复选框
        if($('.checkbox:checked').length == 0) {
            alert("请选择要删除的数据");return false;
        }
        var ids = [];
        $(".checkbox:checked").each(function (i,v) {
            // 循环遍历的是所有选中的复选
            // 获取input里面自定义属性data-id
            //将获取到id放进数组中
            ids.push($(v).attr('data-id'));
        })

        // 发送请求、删除
        // 发送请求 ajax
        $.ajax({
            url:'batchDelete?id='+ids, //请求的url
            type:"GET",// 请求方式
            dataType:'json',
            success:function (response) {
                if(response.code == 200) {
                    //修改成功
                    if(value == '冻结') {
                        that.html("<font color='blue'>正常</font>");
                    } else {
                        that.html("<font color='red'>冻结</font>");
                    }
                } else {
                    // 修改失败
                    alert(response.msg);
                }
            }
        });
    })
</script>


